import tooltip from "components/items/tooltip";
const Tooltip = tooltip({title: 'title', body: [{title: '我是文字提示的内容'}]})

let header = ui_item({
  $$id: 'pageshead',
  title: [
    {
      title: ' ',
      itemClass: 'icon-nav color-primary',
      tap: 'onNav'
    },
  ],
  body: [
    {
      title: '首页',
      url: '/',
    },
    {
      title: '通用',
    },
    {
      title: '按钮',
    },
  ],
  footer: [
    {
      itemClass: 'icon-saui size40',
      attr: {
        isbody: true,
        dire: 'bottom',
        type: 'end',
      },
      aim: 'onDire'
      // <View data-isbody={item.isBody} data-dire='bottom' data-type='end' className='xx'><Button title='下右' onClick={this.onDire} itemClass='btn-default' data-isbody={item.isBody} data-dire='bottom' data-type='end'/></View>
    }
  ],
  itemClass: 'admin-header',
  bodyClass: 'ss-breadcrumb',
  footerClass: 'admin-right',
  onNav(e, param, inst) {
    // header.toggleClass('activeSwitch')
  },
  onDire(e, params, inst) {
    const type = inst.attr('type')
    const dire = inst.attr('dire')
    const isBody = inst.attr('isbody')
    const _dire = type ? dire + ' ' + type : dire
    Tooltip.showPop({dom: e.target, direction: _dire, isBody: isBody, event: 'click'})
    // if (e.target.className.indexOf('ss-button') > 0) {
    // }
    // else {
    //   Tooltip.showPop({dom: e.target.parentNode, direction: _dire, isBody: isBody})
    // }
  },
  onDireHide(e) {
    Tooltip.hidePop(e)
  },
})

let tagList = ui_list({
  data: tagListAdapter([{title: '字体'}, {title: '图标'}, {title: '色块'}, {title: '按钮'}]),
  type: {is: 'scroll', 'scroll-x': true},
  listClass: 'flex-row pages-tag-view',
  itemClass: 'ss-tag tag-grey plain'
})

export const head = (
  <View className='router-header'>
    <header.UI/>
    {/* <tagList.UI/> */}
  </View>
)

function tagListAdapter(data, idx) {
  return data.map((item, ii) => {
    return {
      title: item.title,
      dot: [{itemClass: 'ml-small', attr: {close: true}}],
      itemClass: idx || (data.length - 1) === ii ? 'active' : ''
    }
  })
}